<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/knowledge/clinicaldetail -->
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
		</view>
		<view class="drugimgs">
			<u-swiper style="height: 702rpx;" :list="list" indicator-pos="bottomRight" mode="number"></u-swiper>
		</view>
		<view class="drugthing mt10">
			<view class="drugname flex-row pos-rel">
				<view class="pos-abs align-center justify-center fwbold"
					style="top: 8rpx;margin-right: 8rpx;width: 53rpx;height: 36rpx;background: #0C00FD;border-radius: 50%;color: #fff;font-size: 24rpx;">
					Rx
				</view>
				<view class="text fz36 fwbold" style="color: #303B39;text-indent: 62rpx;">
					{{ drug.name }}
				</view>
			</view>
			<view class="all_names">
				<view class="tip">
					通用名称
				</view>
				<view class="name_font">{{ drug.commonName }}</view>
			</view>
			<view class="all_names">
				<view class="tip">
					商品名称
				</view>
				<view class="name_font">{{ drug.englishName }}</view>
			</view>
			<view class="all_names">
				<view class="tip">
					其他别称
				</view>
				<view class="name_font">{{ drug.alias }}</view>
			</view>
			<view class="all_names">
				<view class="tip">
					适应人群
				</view>
				<view class="name_font">{{ changeStr(drug.intendedPopulation) }}</view>
			</view>
			<consulting></consulting>
			<view class="tips">
				温馨提示：外包装仅供参考，请在药师指导下购买使用。药品信息有时效性，请添加医学顾问，获取最新、准确的信息。
			</view>

			<!-- <view class="lineclamp2 fz28 color303b39 " style="line-height: 46rpx;margin-top: 28rpx;">
				别称：{{ drug.alias }}
			</view> -->
			<!-- <view class="isbox justify-between flex-wrap mt30">
				<view class="isboxli leftli">
					中国是否上市：<span style="color: #00D9B2;">{{ (!drug.chinaListedState ? '未知' : (drug.chinaListedState == 0 ? '否' : '是' )) }}</span>
				</view>
				<view class="isboxli ">
					是否进入医保：<span style="color: #00D9B2;">{{ (!drug.enterMedicalState ? '未知' : (drug.enterMedicalState == 0 ? '否' : '是' )) }}</span>
				</view>
				<view class="isboxli mt16 leftli">
					是否有仿制药：<span style="color: #00D9B2;">{{ (!drug.genericState ? '未知' : (drug.genericState == 0 ? '否' : '是' )) }}</span>
				</view>
				<view class="isboxli mt16 ">
					国内是否能买到：<span style="color: #00D9B2;">{{ (!drug.canChinaState ? '未知' : (drug.canChinaState == 0 ? '否' : '是' )) }}</span>
				</view>
			</view>
			<view class=""
				style="margin-top: 32rpx;color: #00977C;font-weight: 500;font-size: 24rpx;line-height: 40rpx;">
				温馨提示：外包装仅供参考，请在药师指导下购买使用。药品信息有时效性，请添加医学顾问，获取最新、准确的信息。
			</view> -->
		</view>
		<AdvCom :type='3'></AdvCom>

		<view class="drugcontents">
			<!-- <ul class="topcheck ofxw">
				<li :class="contentindex == index ? 'active' : ''" @click="changetop(index)"
					v-for="(item, index) in navlist" :key="index">{{ item.name }}
					<view class="dirc" v-if="contentindex == index"></view>
				</li>
			</ul> -->
			<view class="contentbox">
				<view class="drugcontent" v-show="contentindex == 0">
					<view class="title">{{ drug.name }}</view>
					<view class="tipstext">说明书仅供参考，请在医生与药师指导下购买和使用</view>
					<view class="illustrate" v-html="drug.usageanddosage1">
					</view>
					<view class="illtable">
						<view class="tableli">
							<view class="lable">通用名称</view>
							<view class="content ">{{ drug.commonName }}</view>
						</view>
						<view class="tableli blueli">
							<view class="lable">商品名称</view>
							<view class="content ">{{ drug.englishName }}</view>
						</view>
						<!-- <view class="tableli">
							<view class="lable">英文名称</view>
							<view class="content ">{{ drug.englishName }}</view>
						</view> -->
						<view class="tableli">
							<view class="lable">生产厂家</view>
							<view class="content ">{{ drug.manuName }}</view>
						</view>
						<view class="tableli blueli">
							<view class="lable">剂型</view>
							<view class="content ">{{ drug.dosage }}</view>
						</view>
						<view class="tableli">
							<view class="lable">主要成分</view>
							<view class="content ">{{ drug.ingredient1 }}</view>
						</view>
						<view class="tableli blueli">
							<view class="lable">规格</view>
							<view class="content ">{{ drug.packaging }}</view>
						</view>
						<view class="tableli">
							<view class="lable">有效期</view>
							<view class="content ">{{ drug.periodOfValidity }}</view>
						</view>
						<!-- <view class="tableli">
							<view class="lable">别名</view>
							<view class="content ">{{ drug.alias }}</view>
						</view>
						<view class="tableli blueli">
							<view class="lable">药物价格</view>
							<view class="content" v-html="drug.editionPrice"></view>
						</view>
						<view class="tableli ">
							<view class="lable">适应症</view>
							<view class="content " v-html="drug.adaptationdisease1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">适应靶点</view>
							<view class="content ">{{ drug.adaptiveTarget }}</view>
						</view>
						<view class="tableli ">
							<view class="lable">适应人群</view>
							<view class="content ">{{ drug.intendedPopulation }}</view>
						</view>

						<view class="tableli ">
							<view class="lable">性状</view>
							<view class="content " v-html="drug.xingzhuang"></view>
						</view>
						<view class="tableli ">
							<view class="lable">用法用量</view>
							<view class="content " v-html="drug.usageanddosage1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">不良反应</view>
							<view class="content " v-html="drug.untoward1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">注意事项</view>
							<view class="content " v-html="drug.announcements1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">特殊人群购药</view>
							<view class="content " v-html="drug.suitableforthecroud1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">禁忌症</view>
							<view class="content " v-html="drug.taboos1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">药物相互作用</view>
							<view class="content " v-html="drug.mutual1"></view>
						</view>
						<view class="tableli ">
							<view class="lable">药物过量</view>
							<view class="content " v-html="drug.overdose"></view>
						</view>
						<view class="tableli ">
							<view class="lable">储存方法</view>
							<view class="content " v-html="drug.storagecondition"></view>
						</view>
						
						<view class="tableli ">
							<view class="lable">药代动力学</view>
							<view class="content ">{{ drug.pharmacokinetics }}</view>
						</view> -->

					</view>
					<view class="illustrate" v-html="drug.untoward1">
					</view>
				<!-- <view class="othercont" v-show="contentindex != 0" v-html="othernavcontent"></view> -->
				</view>
				
				<view class="smbook" v-for="(item, index) in smslist" :key="index" @click="tosmspage(item.id)">
					<view class="smtitle">{{item.name}}</nuxt-link>
						<view class="smbooktext" v-html="item.nostyletext">
						</view>
					</view>
				</view>
				<view class="reference_material">
					参考资料：{{ydzsetobj.referenceMaterial}}
				</view>
				<view class="disclaimers">
					<span class="disclaimers_font">免责声明：</span>
					{{ydzsetobj.disclaimers}}
				</view>
			</view>
		</view>
		<getInstructions></getInstructions>
		<view class="combodys">
			<view class="head flex-row">
				<view class="headtetx ischoose" style="">
					栏目导航
					<view class="linebox">
					</view>
				</view>
			</view>
			<view class="con_div justify-between">
				<view class="back_div" @click="toNewsList('01')">适应症</view>
				<view class="back_div" @click="toNewsList('02')">用法用量</view>
				<view class="back_div" @click="toNewsList('03')">治疗效果</view>
				<view class="back_div" @click="toNewsList('04')">上市信息</view>
				<view class="back_div" @click="toNewsList('05')">副作用</view>
				<view class="back_div" @click="toNewsList('06')">注意事项</view>
				<view class="back_div" @click="toNewsList('07')">特殊人群用药</view>
				<view class="back_div" @click="toNewsList('08')">药物相互作用</view>
			</view>
		</view>


		<Newslistcom :head="1" :newsList="newsList"></Newslistcom>
		<AboutDrug :drugList="drugList"
			style="background: linear-gradient( 180deg, #EDFCF9 0%, rgba(237,252,249,0) 100%);"></AboutDrug>
		<community></community>
		<AboutClinical :clinicalList="clinicalList"></AboutClinical>
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import config from '@/config'
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import Newslistcom from '../../components/generalcom/newslistcom.vue';
	import AboutDrug from '../../components/generalcom/aboutdrug.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import getInstructions from '../../components/generalcom/getInstructions.vue'
	import community from '../../components/generalcom/community.vue'
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import {
		getydzSet,
		getInvitationList,
		getDrugById,
		getDrugList,
		getClinicalList,
		selectNewsList,
		getNewsByDrugId
	} from '@/api/api.js'
	export default {
		components: {
			FixedFoot,
			NavHeader,
			AboutClinical,
			Newslistcom,
			AboutDrug,
			AdvCom,
			consulting,
			getInstructions,
			community,
			HotnewsCom
		},

		data() {
			return {
				baseUrl:config.baseUrl,
				//主图icon+商品相册photoalbum -- 
				list: [{
						image: '/static/images/drug.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					},
				],
				drug: {},
				current: 0,
				contentindex: 0,
				othernavcontent: '',
				smslist: [],
				clinicalList: [],
				drugList: [],
				newsList: [],
				ydzsetobj: {},

			}
		},
		onLoad(option) {
			this.getDrug(option.id)
			this.getset()
		},
		methods: {
			getset() {
				getydzSet().then(res => {
					this.ydzsetobj = res.data
				})
			},
			changepage(e) {
				this.page = e.current
			},
			tosmspage(id) {
				uni.navigateTo({
					url: '/pages/knowledge/drugnews?id=' + id,
				});

			},
			toNewsList(type) {
				uni.navigateTo({
					url: '/pages/knowledge/newslist?id=' + this.drug.id + "&type=" + type,
				});
			},
			// 将 photoalbumStr 字符串分割并转换为包含对象的数组
			photoalbum() {
				return this.drug.photoalbum.split(',').map(imagePath => {
					
					return {
						image: this.baseUrl + imagePath
					}; // 为每个图片路径创建一个对象
				});
			},
			getDrug(id) {
				getDrugById(id).then(res => {
					if (200 == res.code) {
						this.drug = res.data

						this.list = this.photoalbum();
						this.getDrugList();
						this.getClinicalList();
						this.selectNewsList();
						this.selecsmsList();
					}
				})
			},
			// 药品列表
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.drug.drugDiseaseList.length > 0 ? this.drug.drugDiseaseList : null
				}
				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
						this.total = res.total;
					}
				})
			},
			// 临床招募列表
			getClinicalList() {
				let param = {
					"pageNum": 1,
					"pageSize": 6,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": this.drug.drugDiseaseList.length > 0 ? this.drug.drugDiseaseList : null
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
			selectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugId": this.drug.id,
				}
				selectNewsList(param).then(response => {
					this.newsList = response.rows
					this.newsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})
				})
			},
			selecsmsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugId": this.drug.id,
					"label": 2,
				}
				selectNewsList(param).then(response => {
					this.smslist = response.rows
					this.smslist.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							if(str.length > 40){
								str = str.substr(0,40) + '...' + '<span style="color:#00977C;" >[ 详情 ]</span>'
							}
							item.nostyletext = str
						}
					})
				})
			},
			// 转化为无格式文本
			changeStr(str){
				if (str) {
					let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
					str = words.replace(/\s/g, "")
					return str;
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	.combodys {
		background: #fff;
		border-radius: 32rpx;
		margin-top: 16rpx;

		.head {
			height: 110rpx;
			padding: 10rpx 32rpx 0;
			border-bottom: 1px solid #D7DDDC;

			.headtetx {
				font-size: 40rpx;
				display: flex;
				align-items: center;
				height: 100rpx;
				margin-right: 40rpx;
				position: relative;

				.linebox {
					position: absolute;
					bottom: 0;
					width: 160rpx;
					height: 10rpx;
					background: #00D9B2;
					border-radius: 50rpx;
				}
			}
		}

		.con_div {
			box-sizing: border-box;
			padding: 32rpx 16rpx 16rpx;
			display: flex;
			flex-wrap: wrap;
			/* 使子元素换行 */

			.back_div {
				width: 343rpx;
				height: 82rpx;
				background: #EDFCF9;
				border-radius: 10px;
				font-weight: bold;
				font-size: 34rpx;
				color: #00977C;
				line-height: 82rpx;
				text-align: center;
				margin-bottom: 16rpx;

			}
		}
	}

	::v-deep .u-swiper-image {
		width: 100%;
		height: 702rpx;
	}

	::v-deep uni-swiper {
		width: 100%;
		height: 702rpx !important;
	}

	::v-deep .u-indicator-item-number {
		background: rgba(48, 59, 57, 0.5) !important;
		color: #fff;
		padding: 10rpx 24rpx;
		font-size: 28rpx;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.drugimgs {
			background-color: #fff;
			padding: 0 24rpx 45rpx;
		}

		.drugthing {
			padding: 48rpx 24rpx;
			background: #fff;
			border-radius: 24rpx;

			.isbox {
				background: #F6FAF9;
				width: 100%;
				height: 158rpx;

				.isboxli {
					width: 351rpx;
					height: 71rpx;
					border-radius: 0px 0px 0px 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #303B39;


				}

				.leftli {
					border-right: 1px solid;
					border-image: linear-gradient(180deg, rgba(184, 195, 193, 0), rgba(184, 195, 193, 1), rgba(184, 195, 193, 0)) 1 1;
				}
			}

			.all_names {
				position: relative;
				margin-top: 20rpx;

				.tip {
					width: 160rpx;
					line-height: 63rpx;
					background: #EDFCF9;
					border-radius: 0rpx 16rpx 16px 16rpx;
					font-weight: 350;
					font-size: 32rpx;
					color: #00D9B2;
					text-align: center;
					position: absolute;
				}

				.name_font {
					font-family: PingFang SC, PingFang SC;
					font-size: 36rpx;
					color: #001214;
					line-height: 63rpx;
					text-indent: 170rpx;
				}
			}

			.tips {
				margin-top: 32rpx;
				font-size: 24rpx;
				color: #00977C;
				line-height: 40rpx;
			}
		}

		.drugcontents {
			margin-top: 16rpx;
			background: #fff;
			border-radius: 24rpx;

			.topcheck {
				border-bottom: 2rpx solid #f7f8f9;
				display: flex;
				height: 106rpx;
				padding: 0 0 0 32rpx;

				li {
					flex-shrink: 0;
					font-size: 36rpx;
					color: #303B39;
					height: 106rpx;
					line-height: 106rpx;
					margin-right: 40rpx;
					position: relative;

					.dirc {
						position: absolute;
						width: 40rpx;
						height: 10rpx;
						background: #00D9B2;
						border-radius: 50rpx;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
					}
				}

				.active {
					color: #303B39;
					font-weight: bold;
				}
			}

			.contentbox {
				padding: 0 24rpx 24rpx;

				.drugcontent {
					box-sizing: border-box;

					.title {
						font-family: Microsoft YaHei, Microsoft YaHei;
						font-weight: bold;
						font-size: 36rpx;
						color: #00977C;
						line-height: 48rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						padding-top: 48rpx;
					}

					.tipstext {
						color: #576260;
						font-size: 24rpx;
						text-align: center;
						margin-top: 24rpx;
						margin-bottom: 48rpx;
					}

					.illustrate {
						font-size: 32rpx;
						font-family: Microsoft YaHei, Microsoft YaHei;
						font-weight: 400;
						color: #303b39;
						line-height: 72rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						
						::v-deep h2 {
							font-weight: bold;
							font-size: 38rpx;
							color: #00977C;
							line-height: 72rpx;
							position: relative;
							padding-left: 12rpx;
							
							 &::before {
								content: "";
								position: absolute;
								left: 0;
								top: 22rpx;
								width: 8rpx;
								height: 38rpx;
								background: #00977C;
								border-radius: 8rpx;
							}
						}
						
						::v-deep h3 {
							font-weight: Heavy;
							font-size: 38rpx;
							color: #00977C;
							line-height: 72rpx;
						}
						
						::v-deep h4{
							color: #303B39;
							font-size: 36rpx;
							line-height: 72rpx;
						}
						
						::v-deep p{
							color: #303B39;
							font-size: 36rpx;
							line-height: 72rpx;
						}
					}

					.illtable {
						border: 1rpx solid #eef6ff;
						border-radius: 24rpx;

						.tableli {
							display: flex;
							padding: 16rpx 0;

							.lable {
								flex-shrink: 0;
								width: 144rpx;
								// height: 0.32rem;
								font-family: Microsoft YaHei, Microsoft YaHei;
								font-weight: 400;
								font-size: 32rpx;
								color: #576260;
								line-height: 42rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
								margin-left: 16rpx;
								border-right: 1rpx solid #d5e1ef;
								padding-right: 16rpx;
							}

							.content {
								font-family: Microsoft YaHei, Microsoft YaHei;
								font-size: 32rpx;
								color: #303b39;
								line-height: 62rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 16rpx;
								margin-top: -10rpx;
							}
						}

						.blueli {
							background: #F6FAF9;
						}
					}
				}

				.othercont {
					box-sizing: border-box;
					background: #fff;
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;

					::v-deep h2 {
						color: #303b39;
						font-weight: bold;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-top: 24rpx;
						margin-bottom: 24rpx;
						line-height: 60rpx;
						text-indent: 72rpx;
					}

					::v-deep h3 {
						color: #303b39;
						font-weight: bold;
						line-height: 72rpx;
						margin-top: 16rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
						text-indent: 72rpx;
					}

					::v-deep h4 {
						color: #303b39;
						font-weight: bold;
						margin-top: 16rpx;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
						text-indent: 72rpx;
					}

					::v-deep p {
						color: #303b39;
						font-size: 36rpx;
						line-height: 32rpx;
						line-height: 72rpx;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
						text-indent: 72rpx;
					}

					::v-deep a {
						font-size: 36rpx;
						color: #0078ff;
					}
				}

				.smbook {
					margin-top: 16rpx;
					background: #F6FAF9;
					// height: 2.44rem;
					box-sizing: border-box;
					border-radius: 24rpx;
					padding: 32rpx 16rpx;

					.smtitle {
						display: block;
						font-family: Microsoft YaHei, Microsoft YaHei;
						font-weight: bold;
						font-size: 36rpx;
						color: #00977C;
						line-height: 52rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.smbooktext {
						margin-top: 16rpx;
						font-family: Microsoft YaHei, Microsoft YaHei;
						font-weight: 400;
						font-size: 32rpx;
						color: #293347;
						line-height: 64rpx;
						font-style: normal;
						text-transform: none;
					}
				}

				.reference_material {
					font-weight: 400;
					font-size: 28rpx;
					color: #303B39;
					line-height: 56rpx;
					margin-top: 32rpx;
					word-break: break-all;
				}

				.disclaimers {
					background: #F0F6F5;
					border-radius: 8rpx;
					padding: 16rpx;
					margin-top: 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #576260;
					line-height: 56rpx;

					.disclaimers_font {
						color: #00D9B2;
					}
				}
			}
		}
	}
</style>